<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel='stylesheet' type='text/css'/>
    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath}/css/backdoor.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/morris.css" type="text/css"/>
    <!-- Graph CSS -->
    <link href="${pageContext.request.contextPath}/css/font-awesome.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script>


</head>

<body>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="mother-grid-inner">
            <!--header start here-->
            <jsp:include page="backdoor_header.jsp"/>
            <!--heder end here-->
            <!--导航-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="${pageContext.request.contextPath}/backdoor/index">主页</a>
                    <i class="fa fa-angle-right"></i>
                </li>
            </ol>
            <!--four-grids here-->
            <div class="four-grids">
                <div class="col-md-3 four-grid">
                    <a href="${pageContext.request.contextPath}/backdoor/userManager">
                        <div class="four-w3ls">
                            <div class="icon">
                                <i class="glyphicon glyphicon-user" aria-hidden="true"></i>
                            </div>
                            <div class="four-text">
                                <h3>用户管理</h3>
                                <h4> ${userCount} </h4>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 four-grid">
                    <div class="four-agileits">
                        <a href="${pageContext.request.contextPath}/backdoor/illegalities">
                            <div class="icon">
                                <i class="glyphicon glyphicon-minus-sign" aria-hidden="true"></i>
                            </div>
                            <div class="four-text">
                                <h3>违规处理</h3>
                                <h4>${violationCount}</h4>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-3 four-grid">
                    <div class="four-wthree">
                        <a href="${pageContext.request.contextPath}/backdoor/blackHouse">
                            <div class="icon">
                                <i class="glyphicon glyphicon-home" aria-hidden="true"></i>
                            </div>
                            <div class="four-text">
                                <h3>小黑屋</h3>
                                <h4>${userInBlackHouseCount}</h4>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-3 four-grid">
                    <div class="four-agileinfo">
                        <a href="${pageContext.request.contextPath}/backdoor/wordFilter">
                            <div class="icon">
                                <i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>
                            </div>
                            <div class="four-text">
                                <h3>违禁词</h3>
                                <h4>${sensitiveWordCount}</h4>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <!--//four-grids here-->
            <!--agileinfo-grap-->
            <div class="agileinfo-grap">
                <div class="agileits-box">
                    <header class="agileits-box-header clearfix">
                        <h3>社区活跃度统计</h3>
                    </header>
                    <div class="agileits-box-body clearfix">
                        <div id="hero-area"></div>
                    </div>
                </div>
            </div>
            <!--//agileinfo-grap-->

            <!--copy rights start here-->
            <jsp:include page="backdoor_footer.jsp"/>
            <!--COPY rights end here-->
        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
    <jsp:include page="backdoor_sidebar.jsp"/>
    <div class="clearfix"></div>
</div>
<!--js -->
<!-- Bootstrap Core JavaScript -->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<!-- /Bootstrap Core JavaScript -->
<!-- morris JavaScript 为曲线图服务-->
<script src="${pageContext.request.contextPath}/js/raphael-min.js"></script>
<script src="${pageContext.request.contextPath}/js/morris.js"></script>
<script>
    $(document).ready(function () {

        graphArea2 = Morris.Area({
            element: 'hero-area',
            padding: 10,
            behaveLikeLine: true,
            gridEnabled: false,
            gridLineColor: '#dddddd',
            axes: true,
            resize: true,
            smooth: true,
            pointSize: 0,
            lineWidth: 0,
            fillOpacity: 0.85,
            data: [{
                period: '2014 Q1',
                iphone: 2668,
                ipad: null,
                itouch: 2649
            },
                {
                    period: '2014 Q2',
                    iphone: 15780,
                    ipad: 13799,
                    itouch: 12051
                },
                {
                    period: '2014 Q3',
                    iphone: 12920,
                    ipad: 10975,
                    itouch: 9910
                },
                {
                    period: '2014 Q4',
                    iphone: 8770,
                    ipad: 6600,
                    itouch: 6695
                },
                {
                    period: '2015 Q1',
                    iphone: 10820,
                    ipad: 10924,
                    itouch: 12300
                },
                {
                    period: '2015 Q2',
                    iphone: 9680,
                    ipad: 9010,
                    itouch: 7891
                },
                {
                    period: '2015 Q3',
                    iphone: 4830,
                    ipad: 3805,
                    itouch: 1598
                },
                {
                    period: '2015 Q4',
                    iphone: 15083,
                    ipad: 8977,
                    itouch: 5185
                },
                {
                    period: '2016 Q1',
                    iphone: 10697,
                    ipad: 4470,
                    itouch: 2038
                },
                {
                    period: '2016 Q2',
                    iphone: 8442,
                    ipad: 5723,
                    itouch: 1801
                }
            ],
            lineColors: ['#ff4a43', '#a2d200', '#22beef'],
            xkey: 'period',
            redraw: true,
            ykeys: ['iphone', 'ipad', 'itouch'],
            labels: ['All Visitors', 'Returning Visitors', 'Unique Visitors'],
            pointSize: 2,
            hideHover: 'auto',
            resize: true
        });

    });
</script>
</body>

</html>